<template>
  <view class="container">
    <view class="menu-list">
      <view
        class="menu-item"
        v-for="(item, index) in settingsList"
        :key="index"
        @click="item.onClick && item.onClick()"
      >
        <view class="menu-content">
          <text class="menu-text">{{ item.text }}</text>
        </view>
        <img v-if="!item.hideArrow" src="/static/placeholder.png" class="arrow" style="width: 30rpx; height: 30rpx; margin-right: 15rpx;" />
        <text v-if="item.version" class="version-text">{{ item.version }}</text>
      </view>
    </view>
    <view class="logout-btn" @click="loginOut">退出登录</view>
  </view>
</template>
<script lang="ts" setup>
	
	const app = getApp();
	
	const loginOut = () =>{
		uni.showLoading({
		  title: '退出登录中...',
		  mask: true
		});
		
		// 模拟登录请求
		setTimeout(() => {
		  const baseUrl = app.globalData.baseUrl;
		  uni.request({
		  	url: encodeURI(baseUrl + '/login/loginOut'),
		  	method: 'GET',
		  	data: {
		  	},
		  	header: {
		  		"X-Tenant-Id": "all",
				"token":uni.getStorageSync("token")
		  	},
		  	success: (res) => {	
				console.log("退出登陆成功")
					uni.removeStorageSync("token");
					uni.removeStorageSync("userId");
					uni.removeStorageSync("tenantId")
					uni.removeStorageSync("type")
		  	}
		  });
		  uni.showToast({
		    title: '退出登录成功',
		    icon: 'success'
		  });
		  
		  // 登录成功后跳转到首页
		  setTimeout(() => {
		    uni.navigateTo({
		      url: '/pages/login/login'
		    });
		  }, 1500);
		}, 2000);
	}
const settingsList = [
  {
    text: '个人资料',
    onClick: () => {},
  },
  {
    text: '账号与安全',
    onClick: () => {},
  },
  {
    text: '消息通知',
    onClick: () => {},
  },
  {
    text: '字体设置',
    onClick: () => {},
  },
  {
    text: '检测新版本',
    version: 'v 7.0.2',
    hideArrow: true,
    onClick: () => {},
  },
];
// 这里可以添加设置相关的逻辑
</script>
<style scoped>
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 240rpx;
}
.menu-list {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-top: 40rpx;
  overflow: hidden;
  margin: 40rpx 15rpx 0 15rpx;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 3rpx solid #EFEFEF;
  background: #fff;
}
.menu-item:last-child {
  border-bottom: none;
}
.menu-content {
  display: flex;
  align-items: center;
}
.icon-wrapper {
  width: 72rpx;
  height: 72rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}
.menu-text {
  font-size: 34rpx;
  color: #000000;
}
.arrow {
  flex-shrink: 0;
}
.version-text {
  color: #bbb;
  font-size: 28rpx;
  margin-left: 10rpx;
}
.logout-btn {
  margin: 32rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 12rpx;
  text-align: center;
  font-size: 34rpx;
  color: #000;
  padding: 32rpx 0;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
</style> 